<template>
  <div class="survey-box">
    <el-row type="flex" justify="space-between" align="middle" class="survey-hedaer">
      <div class="title">{{ title }}</div>
      <change-time :school="hasSchool" @update:time="changeTime" @update:school="changeSchool" />
    </el-row>
    <el-row class="survey-body">
      <el-table v-loading="loading" :data="datas" style="width: 100%" height="500">
        <el-table-column label="课程名称" width="260">
          <template slot-scope="scope">
            <course-title :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column prop="tp_pv" label="访问量(PV)" />
        <el-table-column prop="tp_uv" label="独立访客数(UV)" width="120" />
        <el-table-column prop="place_user_count" label="下单人数" />
        <el-table-column prop="place_count" label="订单数" />
        <el-table-column prop="place_payment_count" label="支付数" />
        <el-table-column :label="'结算金额(' + site.money_title + ')'">
          <template slot-scope="scope">
            <count-roll :number="scope.row.payment_total" :is-money="true" />
          </template>
        </el-table-column>
        <el-table-column label="下单转化率">
          <template slot-scope="scope">
            {{ scope.row.place_conversion | preSymbol }}
          </template>
        </el-table-column>
        <el-table-column label="支付转化率">
          <template slot-scope="scope">
            {{ scope.row.payment_conversion | preSymbol }}
          </template>
        </el-table-column>
        <el-table-column label="详情">
          <template slot-scope="scope">
            <el-link type="primary" @click="$router.push({ path: '/data/analysis/' + scope.row.resource_id + '/course' })"><i class="edu-icon-data" /></el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page.sync="paginate.page"
          :page-size="paginate.count"
          layout="total, prev, pager, next,jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-row>
  </div>
</template>

<script>
import CountRoll from '@/pages/data/components/count_roll';
import ChangeTime from '@/pages/data/components/changetime.vue';
import CourseTitle from './title.vue';
export default {
  components: {
    CountRoll,
    ChangeTime,
    CourseTitle
  },
  props: {
    title: {
      type: String,
      default: '课程详情分析'
    }
  },
  data() {
    return {
      loading: true,
      mhm_id: 1,
      time: 'today',
      response: null,
      hasSchool: false,
      paginate: {
        count: 10,
        page: 1
      }
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.total;
      }
      return 0;
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    changeTime: function(time) {
      this.time = time;
      this.loading = true;
      this.loadData();
    },
    changeSchool: function(mhm) {
      this.mhm_id = mhm;
      this.loading = true;
      this.loadData();
    },
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    loadData: function() {
      this.$http.get(
        '/admin/data/course/visit/rank/list',
        {
          ...this.paginate,
          time: this.time,
          mhm_id: this.mhm_id
        },
        response => {
          this.response = response.data;
          this.hasSchool = response.data.is_platform;
          this.loading = false;
        },
        errror => {
          this.loading = false;
        },
        false
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.survey-box {
  background-color: #fff;
  min-height: 150px;
  margin-bottom: 20px;
  padding: 10px 20px 25px;
  .survey-hedaer {
    margin-bottom: 28px;
    height: 36px;
    padding-right: 20px;
    background-color: #f1f8ff;
    .title {
      color: #303133;
      font-size: 15px;
      padding-left: 6px;
      border-left: 2px solid #5191ff;
    }
  }
}
</style>
